<template>
  <div id="app">
    <!-- 底部四个模块 -->
    <div id="nav" v-show="$route.meta.istrue">
      <router-link
        v-for="(item, index) in base"
        :key="index"
        :to="item.jump"
        :class="$route.path == item.jump ? 'yanshe' : ''"
      >
        <span :class="item.class"></span>
        <span>{{ item.title }}</span>
      </router-link>
    </div>

    <router-view />
  </div>
</template>

<script>
export default {
  data() {
    return {
      base: [
        { class: "iconfont icon-shouye", jump: "/", title: "首页" },
        { class: "iconfont icon-fenlei", jump: "/Classify", title: "分类" },
        { class: "iconfont icon-cart1", jump: "/Cart", title: "购物车" },
        { class: "iconfont icon-wode", jump: "/Mycentre", title: "我的" },
      ],
    };
  },
  /* created() {
    // 在页面加载时读取localStorage里的状态信息
    if (localStorage.getItem('store')) {
      this.$store.replaceState(
        Object.assign(
          {},
          this.$store.state,
          JSON.parse(localStorage.getItem('store'))
        )
      )
    }
    // 在页面刷新时将vuex里的信息保存到localStorage里
    // beforeunload事件在页面刷新时先触发
    window.addEventListener('beforeunload', () => {
      localStorage.setItem('store', JSON.stringify(this.$store.state))
    })
  }, */

  mounted() {
    window.addEventListener("unload", this.saveState);
  },
  methods: {
    saveState() {
      localStorage.setItem("store", JSON.stringify(this.$store.state));
    },
  },
};
</script>

<style lang="less" scope>
#nav {
  background: #ffffff;
  z-index: 9999;
  height: 50px;
  width: 100%;
  display: flex;
  flex: 1;
  position: fixed;
  bottom: 0px;
  left: 0px;
  .yanshe {
    color: #d81230;
  }
  > a {
    justify-content: flex-end;
    width: 100%;
    text-decoration: none;
    display: flex;
    text-decoration: none;
    flex-flow: column;
    align-items: center;
    color: #a9a9a9;
    :first-child {
      font-size: 25px;
    }
    :last-child {
      font-size: 12px;
    }
  }
}
</style>
